/**
 * Created by huangchao on 2017/2/22.
 */
/**
 * Sample React Native App
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    ListView,
    Navigator,
    TouchableOpacity
} from 'react-native';

//自定义组件  export default的作用是到处此组件

export default class Button extends Component {
    //构造函数
    constructor(props){
        super(props);
        //初识数据
        this.state={
            status:'ok',
            disabled:false,
        };
    };
    onPress = () => {
        const { click } = this.props; //获取到父组件传来的事件
        this.disable();
        click(this.enable);//执行父组件的事件
    };
    enable = () => {
        this.setState({
            disabled:false,
        });
    };
    disable = () => {
        this.setState({
            disabled:true,
        });
    };
    render() {
        //大括号包起来是结构props
        const { text } = this.props; //父组件传来的自定义参数
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    disabled={this.state.disabled}
                    style={[styles.button,this.state.disabled && styles.disabled]}
                    onPress={this.onPress}
                >
                    <Text style={styles.buttonText}>{text}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    button:{
        height:40,
        width:100,
        borderRadius:5,
        backgroundColor:'green',
        justifyContent:'center',
    },
    buttonText:{
        textAlign:'center',
        color:'#fff'
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    disabled:{
        backgroundColor:'gray'
    }
});
